<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
		<style>
			html,
			body,
			.mui-content {
				height: 0px;
				margin: 0px;
				background-color: #efeff4;
			}
			
			h5.mui-content-padded {
				margin-left: 3px;
				margin-top: 20px !important;
			}
			
			h5.mui-content-padded:first-child {
				margin-top: 12px !important;
			}
			
			.mui-btn {
				font-size: 16px;
				padding: 8px;
				margin: 3px;
			}
			
			.ui-alert {
				padding: 6px 30px;
				font-size: 16px;
			}
			
			* {
				-webkit-touch-callout: none;
				-webkit-user-select: none;
			}
			
			.right {
				position: absolute;
				right: 0px;
			}
			
			.right1 {
				padding: 9px 30px;
				position: absolute;
				left: 126px;
			}
			
			.fsize {
				margin-top: 8px !important;
				font-size: 15px;
			}
			
			.fsize1 {
				margin-top: -2px !important;
				font-size: 15px;
			}
			
			.btnC {
				font-size: 16px;
				padding: 8px;
				margin: 2px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">请假</h1>
			<a href="leave.html" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
			<button id='send' class=" btnC  mui-btn-primary mui-pull-right" onclick="madd()">提交</button>
			<!--<a class="mui-icon mui-icon-checkmarkempty mui-pull-right" onclick="madd()"></a>-->
		</header>
		<div class="mui-content">
			<div class="">
				<ul class="mui-table-view">
					<div class="mui-input-row">
						<label>申请人</label>
						<label id="people"></label>
					</div>
					<li class="mui-table-view-cell"></li>

					<div class="mui-input-row">
						<label>开始时间</label>
						<div class="ui-alert" id="ui1">
							<div id='demo1' data-options='{}' class="active btn mui-icon mui-icon-arrowright right"></div>
							<div id='result' class="ui-alert1">请选择（必填)</div>
						</div>

					</div>

					<li class="mui-table-view-cell"></li>
					<div class="mui-input-row">
						<label>结束时间</label>
						<div class="ui-alert" id="ui2">
							<div id='demo1' data-options='{}' class="active btn1 mui-icon mui-icon-arrowright right"></div>
							<div id='result1' class="ui-alert1">请选择（必填)</div>
						</div>
					</div>
					<li class="mui-table-view-cell"></li>
					<div class="mui-input-row">
						<label>请假事由</label>
						<textarea class="fsize1" id="lreason" rows="3" placeholder="请输入请假事由（必填）"></textarea>
					</div>

				</ul>
			</div>
		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/mui.picker.min.js"></script>
		<script src="js/public.js"></script>
		<script>
			var createBy = localStorage.getItem("employeeid");
			var str = new Array();
			(function($) {
				$.init();
				var result = $('#result')[0];
				var btns = $('#ui1');

				var result1 = $('#result1')[0];
				var btns1 = $('#ui2');

				btns.each(function(i, btn) {
					btn.addEventListener('tap', function() {
						var optionsJson = this.getAttribute('data-options') || '{}';
						var options = JSON.parse(optionsJson);
						var id = this.getAttribute('id');
						/*
						 * 首次显示时实例化组件
						 * 示例为了简洁，将 options 放在了按钮的 dom 上
						 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
						 */
						var picker = new $.DtPicker(options);
						picker.show(function(rs) {
							/*
							 * rs.value 拼合后的 value
							 * rs.text 拼合后的 text
							 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
							 * rs.m 月，用法同年
							 * rs.d 日，用法同年
							 * rs.h 时，用法同年
							 * rs.i 分（minutes 的第二个字母），用法同年
							 */
							var tt = mcheck("开始" + rs.text + ":00");
							result.innerText = rs.text + ":00";
							/* 
							 * 返回 false 可以阻止选择框的关闭
							 * return false;
							 */
							/*
							 * 释放组件资源，释放后将将不能再操作组件
							 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
							 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
							 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
							 */
							picker.dispose();
						});
					}, false);
				});

				btns1.each(function(i, btn1) {
					btn1.addEventListener('tap', function() {
						var optionsJson = this.getAttribute('data-options') || '{}';
						var options = JSON.parse(optionsJson);
						var id = this.getAttribute('id');
						/*
						 * 首次显示时实例化组件
						 * 示例为了简洁，将 options 放在了按钮的 dom 上
						 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
						 */
						var picker = new $.DtPicker(options);
						picker.show(function(rs) {
							/*
							 * rs.value 拼合后的 value
							 * rs.text 拼合后的 text
							 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
							 * rs.m 月，用法同年
							 * rs.d 日，用法同年
							 * rs.h 时，用法同年
							 * rs.i 分（minutes 的第二个字母），用法同年
							 */
							var tt = mcheck("结束" + rs.text + ":00");
							result1.innerText = rs.text + ":00";
							/* 
							 * 返回 false 可以阻止选择框的关闭
							 * return false;
							 */
							/*
							 * 释放组件资源，释放后将将不能再操作组件
							 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
							 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
							 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
							 */
							picker.dispose();
						});
					}, false);
				});
			})(mui);

			mui.plusReady(function() {
				mget();
			});

			//提交表单数据
			function madd() {
				var s = location.search.substring(1); //这个就是页面?后面的内容，自己处理一下
				var id = s.replace('id=', '');
				var starttime = document.getElementById("result").innerText;
				var endtime = document.getElementById("result1").innerText;
				var reason = document.getElementById("lreason").value;
				//console.log(starttime+""+endtime+""+reason);
				if(starttime.indexOf("请选择") > 0 || endtime.indexOf("请选择") > 0 || reason ==0 ) {
					mui.toast("填写必要的信息");
				} else {
					var network = true;
					if(mui.os.plus) {
						mui.plusReady(function() {
							if(plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE) {
								network = false;
							}
						});
					}
					if(network) {
						console.log('网络正常,正在发送请求...');
						mui.ajax({
							url: 'http://113.71.26.27:8080/tpl/function/insertleave',
							async: true,
							type: 'post',
							timeout: 2000,
							data: {
								id: id,
								createBy: createBy,
								startTime: starttime,
								endTime: endtime,
								reason: reason
							},
							dataType: "text",
							success: function(data) {
								if(data == "1") {
									//列表页面
									window.location.href = "leave.html";
								}
							}
						});
					} else {
						mui.toast("当前网络不给力，请稍后再试...");
					}

				}

			}

			//接收页面的id参数
			function mget() {
				var s = location.search.substring(1); //这个就是页面?后面的内容，自己处理一下
				s = s.replace('id=', '');
				if(s != '') { //有id时为编辑，加载页面
					mpeople()
					mlist(s);
				} else { //无id时，不加载
					mpeople()
				}
			}
			//通过id获取后台的数据
			function mlist(id) {
				var network = true;
				if(mui.os.plus) {
					mui.plusReady(function() {
						if(plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE) {
							network = false;
						}
					});
				}
				if(network) {
					console.log('网络正常,正在发送请求...');
					mui.ajax({
						url: 'http://113.71.26.27:8080/tpl/function/findleave?id=' + id,
						async: true,
						type: 'get',
						timeout: 2000,
						success: function(data) {
							document.getElementById("result").innerText = mmtime(data[0].startTime);
							document.getElementById("result1").innerText = mmtime(data[0].endTime);
							document.getElementById("lreason").innerHTML = data[0].reason;
						}
					});
				} else {
					mui.toast("当前网络不给力，请稍后再试...");
				}

			}

			//监听器开始时间与结束时间()
			function mcheck(r1) {
				if(r1.substr(0, 2) == "开始") {
					str[0] = r1.substr(2, 20);
				} else {
					str[1] = r1.substr(2, 20);
				}
				if(mmtime(new Date) > str[0] && str[0] != null) {
					window.location.href = "askleave.html";
					alert("开始时间不能小于或等于当前时间");
				}
				if(str[0] != null && str[1] != null && str[0] >= str[1]) {
					window.location.href = "askleave.html";
					alert("开始时间不能大于或等于结束时间");
				}
			}

			/**
			 * 重写返回事件
			 */
			mui.back = function() {

				window.location.href = "leave.html";
			}
		</script>
	</body>

</html>